<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>AMap JSAPI Loader</title>
  <link rel="stylesheet" href="/map/demo-center.css"/>
  <style>
    html, body, #container {
      height: 100%;
      width: 100%;
      margin: 0;
    }
    .btn{
      width:10rem;
      margin-left:6.8rem;
    }
  </style>
</head>
<body>
<div id="container" tabindex="0"></div>
<div class="input-card" style='width:28rem;'>
  <label style='color:grey'>地理编码，根据地址获取经纬度坐标</label>
  <div class="input-item">
    <div class="input-item-prepend"><span class="input-item-text" >地址</span></div>
    <input id='address' type="text" value='重庆市江北区' >
  </div>
  <div class="input-item">
    <div class="input-item-prepend"><span class="input-item-text">经纬度</span></div>
    <input id='lnglat' disabled type="text">
  </div>
  <input id="geo" type="button" class="btn" value="搜索" />
</div>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
  window._AMapSecurityConfig = {
    securityJsCode:'8a3ee31a0c9ca620fa5aaf3e23a26cff',
  }
  //删除地图上所有点
  function removeMarkers(map){
    map.clearMap()
  }
  //在指定位置打开信息窗体
  function openInfo(latlngArr,address) {
    //构建信息窗体中显示的内容
    var info = [];
    info.push("<div style=\"padding:0px 0px 0px 4px;\"><b>高德软件</b>");
    info.push(address+"</div></div>");
    infoWindow = new AMap.InfoWindow({
      offset : new AMap.Pixel(0, -30),//偏移量，默认以marker左上角位置为基准点
      content: info.join("<br/>")  //使用默认信息窗体框样式，显示信息内容
    });
    infoWindow.open(map, latlngArr);
  }
  AMapLoader.load({ //首次调用 load
    key:'c77c041d6752d06a7086f59c480d46e5',//首次load key为必填
    version:'2.0',
    plugins:['AMap.Scale','AMap.ToolBar','AMap.Geocoder']
  }).then((AMap)=>{
    map = new AMap.Map('container',{
      resizeEnable: true,
      center: [106.549373,29.564146]//默认的地图中心经纬度
    });
    // map.addControl(new AMap.Scale())
    // map.addControl(new AMap.ToolBar())
    var lbs = map.getCenter();
    console.log(lbs);
    map.add(new AMap.Marker({
      position:[106.549373,29.564146],
      offset : new AMap.Pixel(-21,-21),//偏移量，默认以marker左上角位置为基准点
      // position:map.getCenter()
    }));
    //点标记 添加监听
    var clickListener;
    //bt2的click的绑定事件
    var remove = function() {
      if (clickListener) {
        AMap.Event.removeListener(clickListener);//移除事件，以绑定时返回的对象作为参数
      }
    };
    //bt1的click的绑定事件
    var bind = function() {
      remove(); //防止重复绑定
      clickListener = AMap.Event.addListener(map, "click", function(e) {
        //移除其它所有点
        removeMarkers(map);
        //创建新点
        new AMap.Marker({
          position: e.lnglat,
          map: map
        });
        //新点标记，同时获取显示地址,赋值到输入框
        var geocoderLatLng = new AMap.Geocoder({});
        geocoderLatLng.getAddress(e.lnglat, function(status, result) {
          if (status === 'complete'&&result.regeocode) {
            var address = result.regeocode.formattedAddress;
            document.getElementById('address').value = address;
            document.getElementById('lnglat').value = e.lnglat;
            //信息窗体
            openInfo(e.lnglat,address);
          }else{
            console.error('根据经纬度查询地址失败');
          }
        });
      });
    };
    //绑定地图点击
    bind();
  }).catch((e)=>{
    console.error(e);
  });

  // AMapLoader.load({ //可多次调用load
  //   plugins:['AMap.MapType']
  // }).then((AMap)=>{
  //   map.addControl(new AMap.MapType())
  // }).catch((e)=>{
  //   console.error(e);
  // });

  AMapLoader.load({ //可多次调用load
    plugins:['AMap.Geocoder']
  }).then((AMap)=>{
    //地址解析
    var geocoder = new AMap.Geocoder({});
    function geoCode() {
      var address  = document.getElementById('address').value;
      geocoder.getLocation(address, function(status, result) {
        if (status === 'complete'&&result.geocodes.length) {
          //移除其它所有点
          removeMarkers(map);
          var lnglat = result.geocodes[0].location
          var marker = new AMap.Marker();
          document.getElementById('lnglat').value = lnglat;
          marker.setPosition(lnglat);
          map.add(marker);
          map.setFitView(marker);
          //信息窗体
          openInfo(lnglat,address);
        }else{
          log.error('根据地址查询位置失败');
        }
      });
    }
    document.getElementById("geo").onclick = geoCode;
    document.getElementById('address').onkeydown = function(e) {
      if (e.keyCode === 13) {
        geoCode();
        return false;
      }
      return true;
    };
  }).catch((e)=>{
    console.error(e);
  });
</script>
</body>
</html>